<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>后台主页</title>
    <link href="../resources/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../resources/css/style.css" rel="stylesheet">
    <link href="../resources/css/exam.css" rel="stylesheet">
    <script type="text/javascript" src="../resources/js/jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/vue/vue.js"></script>
    <script type="text/javascript" src="../resources/vue/date.js"></script>
    <script type="text/javascript" src="../resources/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../resources/js/all.js"></script>
    <script type="text/javascript" src="../resources/js/tag-list.js"></script>
    <script type="text/javascript" src="../resources/js/add-tag.js"></script>
    <script type="text/javascript" src="../resources/js/add-tag.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../resources/laypage/laypage.js" charset="utf-8"></script>
    <script type="text/javascript" src="../resources/layui/layui.all.js" charset="utf-8"></script>
    <script type="text/javascript" src="../resources/js/h-ui/lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
    <script type="text/javascript" src="../resources/js/h-ui/lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
    <script type="text/javascript" src="../resources/js/jquery/canvas-particle.js" charset="utf-8"></script>
</head>
<style type="text/css">
    svg text tspan {
        font-size: 25px;
    }

    g text tspan {
        font-size: 15px;
    }

    .highcharts-button-symbol {
        display: none;
    }

    .highcharts-credits {
        display: none;
    }
</style>
<body>
<header>
    <div class="logo">
        <h1>在线考试系统</h1>
    </div>
    <div class="navbar bs-docs-nav" role="banner">
        <div class="container" style="margin: 0  264px ;">
            <ul class="nav navbar-nav">
                <li class="nav-tabs">
                    <a href="main.html" style="font-size: 1.2em; width: 135px;"><i
                            class="glyphicon glyphicon-home"></i>&nbsp;首页</a>
                </li>
                <li>
                    <a href="/view/question/question-list" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list"></i>&nbsp;试题管理</a>
                </li>

                <li>
                    <a href="exampaper-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list-alt"></i>&nbsp;试卷管理</a>
                </li>
                <li>
                    <a href="exam-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-indent-right"></i>&nbsp;考试管理</a>
                </li>
                <li>
                    <a href="/toUser.do" style="font-size: 1.2em;width: 130px;"><i
                            class="glyphicon glyphicon-user"></i>&nbsp;用户管理</a>
                </li>
                <li>
                    <a href="/toTag.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-random"></i>&nbsp;通用管理</a>
                </li>
                <li>
                    <a href="/toSystem.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-cog"></i>&nbsp;系统设置</a>
                </li>
            </ul>
            <a href="/userLogout" style="position: absolute;right: 100px; top: 10px;"><i class=""></i>[注销]</a>
        </div>

    </div>
</header>
<div class="container" id="app" style="min-height:500px; width: 1700px;">
    <div id="mydiv">
        <canvas style="position: fixed; top: 0; left: 0; z-index: -1;" width="100%" height="100%"></canvas>
        <br/>

        <div id="questionContainer" style="position: relative; left: 800px; width:650px;height:400px; z-index: 5"></div>

        <br/>
        <div class="col-xs-2" id="left-menu">

        </div>
        <div class="col-xs-10" id="right-content" style="width: 1250px;">
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-7">
                        <div style="float: left; position:relative; top: -400px; left: 100px; width: 1000px;">
                            <div class="infobox infobox-blue infobox-small" style="float: none">
                                <div class="infobox-progress">
                                    <i class="fa fa-cloud"></i>
                                </div>
                                <div class="infobox-data">
                                    <div class="infobox-content">试题</div>
                                    <div class="infobox-content" id="question-num" style="font-size: 1.5em;">-</div>
                                </div>
                            </div>
                            <br/>
                            <div class="infobox infobox-dark infobox-small" style="float: none">
                                <div class="infobox-progress">
                                    <i class="fa fa-file-text-o"></i>
                                </div>
                                <div class="infobox-data">
                                    <div class="infobox-content">试卷</div>
                                    <div class="infobox-content" id="questionPaper-num" style="font-size: 1.5em;">-
                                    </div>
                                </div>
                            </div>
                            <br/>
                            <div class="infobox infobox-blue infobox-small" style="float: none">
                                <div class="infobox-progress">
                                    <i class="fa fa-user"></i>
                                </div>
                                <div class="infobox-data">
                                    <div class="infobox-content">学员</div>
                                    <div class="infobox-content" id="student-num" style="font-size: 1.5em;">-</div>
                                </div>
                            </div>
                        </div>
                        <div style="position: relative; top: -200px;">
                            <h4>
                                <i class="ace-icon fa fa-star orange"></i>
                                需要审核
                            </h4>
                            <div class="widget-body">
                                <div class="widget-main no-padding">
                                    <div class="container">
                                        <table class="table-striped table" style="width: 850px;">
                                            <thead>
                                            <tr class="warning">
                                                <td>序号</td>
                                                <td>申请人</td>
                                                <td>考试名称</td>
                                                <td>申请时间</td>
                                                <td>操作</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr class="success" v-for="(item,index) in result">
                                                <td>{{index+1}}</td>
                                                <td>{{item.true_name}}</td>
                                                <td>{{item.exam_name}}</td>
                                                <td>{{item.create_time | DateFilter }}</td>
                                                <td><a href='javascript:void(0)' @click="editEvent(item.ueid)">通过</a>|
                                                    <a href='javascript:void(0)' @click="delEvent(item.ueid)">拒绝</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                            <tr>
                                                <td colspan="3">
                                                    <div id="pagenav" style="margin-left:450px;"></div>
                                                </td>
                                            </tr>
                                        </table>

                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <h4>
                    <i class="ace-icon fa fa-star orange"></i>
                    考试分数
                </h4>
                <div id="userExamInfo">
                    <table class="table">
                        <tr class="warning">
                            <td>序号</td>
                            <td>学生姓名</td>
                            <td>所属班级</td>
                            <td>考试名称</td>
                            <td>考试时间</td>
                            <td>试卷总分</td>
                            <td>学生得分</td>
                        </tr>
                        <tr class="btn-primary" v-for="(item,index) in userExamInfoResult">
                            <td>{{index+1}}</td>
                            <td>{{item.true_name}}</td>
                            <td>{{item.dep_name}}</td>
                            <td>{{item.exam_name}}</td>
                            <td>{{item.create_time | DateFilter}}</td>
                            <td>{{item.totalpoint}}</td>
                            <td>{{item.point}}</td>
                        </tr>
                        <tr>
                            <td colspan="7">
                                <div id="pagenav5"></div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<footer>
    <div class="container" style="width: 500px; margin: 0 auto;">
        <div class="row">
            <div class="col-md-12">
                <div class="copy">
                    <p>
                        ExamManage © <a href="javascript:void(0);" target="_blank">ExamManage</a> - <a
                            href="javascript:void(0);" target="_blank">主页</a> | <a href="javascript:void(0);"
                                                                                   target="_blank">关于我们</a>
                        | <a href="javascript:void(0);" target="_blank">FAQ</a> | <a
                            href="javascript:void(0);" target="_blank">联系我们</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>
<script>
    Vue.filter("DateFilter", function (date) {
        var v = new Date(date);
        return formatDate(v, "yyyy-MM-dd HH:mm:ss");
    });

    window.onload = function () {
        //配置
        var config = {
            vx: 2,//点x轴速度,正为右，负为左
            vy: 2,//点y轴速度
            height: 2,//点高宽，其实为正方形，所以不宜太大
            width: 2,
            count: 300,//点个数
            color: "51,104,154",//点颜色
            stroke: "50,155,230",//线条颜色
            dist: 5000,//点吸附距离
            e_dist: 10000,//鼠标吸附加速距离
            max_conn: 10//点到点最大连接数
        };
        //调用
        CanvasParticle(config);
    };


    var app = new Vue({
        el: '#app',
        data: {
            result: [],
            userExamInfoResult: []
        }
    });

    //查询用户数据
    var getApplication = function (curr) {
        $.ajax({
            type: 'POST',
            url: '/getAllApplication',
            dataType: 'json',
            data: {
                pageSize: 5,
                pageNum: curr || 1
            },
            success: function (msg) {
                app.result = msg.page;
                laypage({
                    cont: 'pagenav',  //分页容器
                    pages: msg.totalPage, //总页数
                    skin: '#333333',
                    first: '第一页',
                    last: '最后一页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getApplication(obj.curr);
                        }
                    }
                });
            }
        });
    };
    getApplication();


    var editEvent = function (id) {
        // layer.confirm('确认通过审核？', {
        //     btn: ['是', '否']
        // }, function () {
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '/updApplication',
            data: {
                ueid: id
            },
            success: function (msg) {
                if (msg > 0) {
                    getApplication();
                    layer.msg('审核成功', {icon: 6});
                }

            }, error: function () {
              //  alert("失败！！");
            }

        });
        // }, function () {
        //
        // });
    };

    var delEvent = function (id) {
        layer.confirm('拒绝审核？', {
            btn: ['是', '否']
        }, function () {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: '/delApplication',
                data: {
                    ueid: id
                },
                success: function (msg) {
                    if (msg > 0) {
                        getApplication();
                        layer.msg('成功', {icon: 6});
                    }

                }, error: function () {
                  //  alert("失败！！");
                }

            });
        }, function () {

        });
    };

    var studentCount = function () {

        $.ajax({
            type: 'get',
            url: '/getStudentCount',
            success: function (msg) {
                $("#student-num").text(msg + "名学员");
            },
        });
    };
    studentCount();

    var questionCount = function () {

        $.ajax({
            type: 'get',
            url: '/getQuestionCount',
            success: function (msg) {
                $("#question-num").text(msg + "道试题");
            },
        });
    };
    questionCount();

    var paperCount = function () {

        $.ajax({
            type: 'get',
            url: '/ExamPage/getPaperCount',
            success: function (msg) {
                $("#questionPaper-num").text(msg + "张试卷");
            },
        });
    };


    function getUserExamInfo(curr) {
        $.ajax({
            type: 'post',
            url: '/getUserExamInfo',
            data: {
                pageSize: 5,
                pageNum: curr || 1
            },
            dataType: 'json',
            success: function (msg) {
                app.userExamInfoResult = msg.page;
                laypage({
                    cont: 'pagenav5', //分页容器
                    pages: msg.totalPage,//总页数
                    skin: "#333333",
                    first: "首页",
                    last: "尾页",
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getUserExamInfo(obj.curr);
                        }
                    }
                })
            },
            error: function () {
             //   alert("列表有误");
            }
        })
    }


    //制作饼图
    function makePie() {
        $.ajax({
            type: 'get',
            url: '/getQuestionCountGroupByField',
            dataType: 'json',
            success: function (msg) {
                $('#questionContainer').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: "强大的题库支持"
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: '题库占比',
                        colorByPoint: true,
                        size: '200px',
                        data: [
                            [msg[0].fieldName, msg[0].questionCount],
                            [msg[1].fieldName, msg[1].questionCount],
                            {
                                name: msg[2].fieldName,
                                y: msg[2].questionCount,
                                sliced: true,
                                selected: true
                            },
                            [msg[3].fieldName, msg[3].questionCount],
                            [msg[4].fieldName, msg[4].questionCount],
                            ['其他', 100 - msg[0].questionCount - msg[1].questionCount - msg[2].questionCount - msg[3].questionCount - msg[4].questionCount]
                        ]
                    }]
                });
            },
            error: function () {
             //   alert("饼图生成错误")
            }
        })
    }

    $(function () {
        makePie();
        paperCount();
        getUserExamInfo();
        questionCount();
        getApplication();
    })


</script>